<template>
  <div class="userList">
    <h3>用户列表</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入用户名" v-model="search1">
          <template slot="prepend">用户名</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入用户ID" v-model="search2">
          <template slot="prepend">用户Id</template>
        </el-input>
      </div>
       <div class="cond1 cond">
        <el-input placeholder="请输入上级ID" v-model="search9">
          <template slot="prepend">上级Id</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入手机号" v-model="search3">
          <template slot="prepend">手机号</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入邀请码" v-model="search4">
          <template slot="prepend">邀请码</template>
        </el-input>
      </div>

      <div class="cond2 cond">
        <label>账号状态</label>
        <el-select v-model="search5" placeholder="请选择">
          <el-option
            v-for="item in optionsAcount"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>设备</label>
        <el-select v-model="search6" placeholder="请选择">
          <el-option
            v-for="item in optionsDevice"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>渠道号</label>
        <el-select v-model="search8" placeholder="请选择">
          <el-option v-for="item in optionsChannel" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>用户身份</label>
        <el-select v-model="search10" placeholder="请选择">
          <el-option v-for="item in optionsUser" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>注册时间</label>
        <el-date-picker
          v-model="search7"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="searchMethod">搜索</el-button>
      </div>
    </div>
    <!-- <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData">添加</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="batchDelete">删除</el-button>
    </div>-->
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" width="50" header-align="center" align="center" label="序号"></el-table-column>
        <el-table-column header-align="center" align="center" prop="nick" label="用户名" width="80"></el-table-column>
        <el-table-column header-align="center" align="center" prop="id" label="用户ID" width="70"></el-table-column>
        <el-table-column header-align="center" align="center" prop="parent_id" label="上级ID" width="70"></el-table-column>
        <el-table-column header-align="center" align="center" prop="mobile" label="手机号" width="120"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="device_text"
          label="设备"
          width="60"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="version" label="版本" width="80"></el-table-column>
        <el-table-column header-align="center" align="center" prop="area" label="地区" width="80"></el-table-column>
        <el-table-column header-align="center" align="center" prop="code" label="邀请码" width="88"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="channel_id"
          label="渠道号"
          width="70"
        ></el-table-column>
        <!-- <el-table-column
          header-align="center"
          align="center"
          prop="order_count"
          label="订单数"
          width="65"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="pay_count"
          label="充值数"
          width="65"
        ></el-table-column> -->
        <el-table-column header-align="center" align="center" prop="coins" label="钻石" width="70"></el-table-column>
        <el-table-column header-align="center" align="center" prop="fans" label="粉丝" width="60"></el-table-column>
        <el-table-column header-align="center" align="center" prop="video_count" label="视频数量" width="60"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="vip_expired"
          label="vip到期时间"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="created_at"
          label="注册时间"
          sortable
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="last_login_at"
          label="最近登陆时间"
          sortable
          width="100"
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="账号状态" width="160">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-text="正常"
              inactive-text="禁用"
              @change="changeSwitch(scope.$index, scope.row)"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="320" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
              v-if="permissions_obj.id_91||permissions_obj.id_all"
            >详情</el-button>
            <!-- <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)">修改</el-button> -->
            <el-button
              size="mini"
              type="danger"
              @click="handleVip(scope.$index, scope.row)"
              v-if="permissions_obj.id_97||permissions_obj.id_all"
            >发会员</el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleDiamond(scope.$index, scope.row)"
            >发钻石</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleOldUser(scope.$index, scope.row)"
              v-if="permissions_obj.id_96||permissions_obj.id_all"
            >找回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-sizes="[10,30,50,100]"
        :page-size="pageSize"
        layout="total, prev, pager, next,sizes,jumper"
        :total="totalSize"
      ></el-pagination>
    </div>
    <!-- 用户详情弹窗 -->
    <el-dialog title="用户详情" :visible.sync="centerDialogVisible" width="45%" center>
      <div class="detail">
        <div class="title">基本信息</div>
        <div class="detailBox">
          <div class="detailItem">
            <font>用户名：</font>
            <span>{{userDetail.nick}}</span>
          </div>
          <div class="detailItem">
            <font>用户id：</font>
            <span>{{userDetail.id}}</span>
          </div>
          <div class="detailItem">
            <font>手机号：</font>
            <span>{{userDetail.mobile}}</span>
          </div>
          <div class="detailItem">
            <font>应用版本：</font>
            <span>{{userDetail.version}}</span>
          </div>
          <div class="detailItem">
            <font>设备：</font>
            <span>{{userDetail.device_text}}</span>
          </div>
          <div class="detailItem">
            <font>设备号：</font>
            <span>{{userDetail.device_no}}</span>
          </div>
          <div class="detailItem">
            <font>IP：</font>
            <span>{{userDetail.ip}}</span>
          </div>
          <div class="detailItem">
            <font>地区：</font>
            <span>{{userDetail.area}}</span>
          </div>
          <div class="detailItem">
            <font>vip到期时间：</font>
            <span>{{userDetail.vip_expired}}</span>
          </div>
          <div class="detailItem">
            <font>订单数：</font>
            <span>{{userDetail.order_count}}</span>
          </div>
          <div class="detailItem">
            <font>充值数：</font>
            <span>{{userDetail.pay_count}}</span>
          </div>
          <div class="detailItem">
            <font>钻石余额：</font>
            <span>{{userDetail.coins}}</span>
          </div>
          <div class="detailItem">
            <font>注册时间：</font>
            <span>{{userDetail.created_at}}</span>
          </div>
          <div class="detailItem">
            <font>今日观看次数：</font>
            <span>{{userDetail.max_view}}/10</span>
          </div>
          <div class="detailItem">
            <font>最近登陆时间：</font>
            <span>{{userDetail.last_login_at}}</span>
          </div>
          <div class="detailItem">
            <font>邀请人数：</font>
            <span>{{userDetail.invite}}</span>
          </div>
          <div class="detailItem">
            <font>邀请人id：</font>
            <span>{{userDetail.parent_id}}</span>
          </div>
          <div class="detailItem">
            <font>邀请人：</font>
            <span>{{userDetail.parent_nick}}</span>
          </div>
        </div>
      </div>
      <div class="userInfo">
        <div class="row">
          <span>身份卡二维码：</span>
          <font id="qrcode" v-if="isShowQrcode"></font>
        </div>
        <div class="row">
          <span>用户名：</span>
          <el-input placeholder="请输入用户名" v-model="inputUserName" clearable></el-input>
        </div>
        <div class="row">
          <span>用户头像：</span>
          <el-upload
            :action="imgUploadParth"
            :on-preview="handlePictureCardPreview"
            list-type="picture-card"
            :limit="1"
            :on-success="imgUploadSuccess"
            :on-error="imgUploadFailure"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
        <div class="row">
          <span>用户个人主页背景：</span>
          <el-upload
            :action="bgImgUploadParth"
            :on-preview="handleBgPictureCardPreview"
            list-type="picture-card"
            :limit="1"
            :on-success="bgImgUploadSuccess"
            :on-error="bgImgUploadFailure"
            :file-list="bgImgFileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="bgDialogVisible">
            <img width="100%" :src="bgDialogImageUrl" alt />
          </el-dialog>
        </div>
        <div class="row">
          <span>用户个人简介：</span>
          <el-input placeholder="请输入个人简介" v-model="inputIntroduction" clearable type="textarea"></el-input>
        </div>
        <div class="dialogBtn">
          <el-button type="primary" size="small" @click="submitModifyEditor">提交</el-button>
          <el-button type="info" size="small" @click="cancelModifyEditor">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- //发放会员卡弹窗 -->
    <el-dialog title="发放会员卡" :visible.sync="vipDialogVisible" width="40%" center>
      <div>
        <span>会员卡：</span>
        <el-select v-model="sendVipSelect" placeholder="请选择">
          <el-option v-for="item in optionsVip" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitSendVip">提交</el-button>
        <el-button type="info" size="small" @click="cancelSendVip">取消</el-button>
      </div>
    </el-dialog>
    <!-- //绑定老用户弹窗 -->
    <el-dialog title="绑定老用户" :visible.sync="oldUserDialogVisible" width="40%" center>
      <div>
        <span>老用户手机号：</span>
        <el-input placeholder="请输入手机号" v-model="inputOldUser" clearable></el-input>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitOldUser">提交</el-button>
        <el-button type="info" size="small" @click="cancelOldUser">取消</el-button>
      </div>
    </el-dialog>
    <!-- //发放钻石 -->
    <el-dialog title="发放钻石" :visible.sync="goldDialogVisible" width="40%" center>
      <div class="goldRow">
        <span>发放钻石：</span>
        <el-input placeholder="请输入钻石数量" v-model="inputgoldNum" clearable type="number"></el-input>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitSendGold">提交</el-button>
        <el-button type="info" size="small" @click="cancelSendGold">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import md5 from "js-md5";
import QRCode  from "qrcodejs2"
export default {
  name: "userList",
  components: {},
  data() {
    return {
      //账号状态
      optionsAcount: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "禁用"
        },
        {
          value: "1",
          label: "正常"
        },
        {
          value: "2",
          label: "删除"
        }
      ],
      //设备
      optionsDevice: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "I",
          label: "苹果"
        },
        {
          value: "A",
          label: "安卓"
        },
        {
          value: "H",
          label: "来源h5"
        }
      ],
      //会员卡列表
      optionsVip: [],
      optionsUser:[
        {
          value: "",
          label: "全部"
        },
        {
          value: 1,
          label: "普通"
        },
        {
          value: 2,
          label: "主播"
        },
      ],
      //渠道号列表
      optionsChannel: [],
      search1: "",
      search2: "",
      search3: "",
      search4: "",
      search5: "",
      search6: "",
      search7: [],
      search8: "",
      search9: "",
      search10: "",
      //用户详情弹窗
      centerDialogVisible: false,
      //发放会员卡弹窗
      vipDialogVisible: false,
      //绑定老客户弹窗
      oldUserDialogVisible: false,
      //发放金币弹窗
      goldDialogVisible: false,
      tableData: [],
      //多选框选中的值
      multipleSelection: [],
      currentPage1: 1,
      pageSize:10,
      totalSize: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      //用户邀请历史
      historyData: [],
      //用户设备号
      deviceData: [],
      // 发放会员卡选中
      sendVipSelect: "",
      //老用户手机号
      inputOldUser: "",
      //发放金币数
      inputgoldNum: "",
      //发放密码
      inputSendPassword: "",
      initData: {},
      selectId: "",
      userDetail: {},
      // 权限管理
      permissions: [],
      permissions_obj: {},
      //头像上传成功返回地址
      uploadImg: "",
      // 用户个人主页背景上传成功返回地址
      uploadBgImg: "",
      //用户个人主页背景上传接口地址
      bgImgUploadParth: "",
      //图片上传接口地址
      imgUploadParth: "",
      fileList: [],
      bgImgFileList: [],
      // 图片预览
      dialogVisible: false,
      dialogImageUrl: "",
      bgDialogVisible: false,
      bgDialogImageUrl: "",
      //修改用户信息弹窗
      inputUserName: "",
      //修改用户个人简介
      inputIntroduction: "",
      isShowQrcode:false,
      flag:true,
    };
  },
  watch:{
    centerDialogVisible(){
      if(this.centerDialogVisible){
        this.isShowQrcode=true;
      }else{
         this.isShowQrcode=false;
      };
    }
  },
  created() {
    //权限判断
    this.permissions = this.$store.state.permissions;
    let oneOff = false;
    this.permissions.forEach((item, index) => {
      if (item == -1) {
        oneOff = true;
      } else {
        this.permissions_obj["id_" + item] = item;
      }
    });
    if (oneOff) {
      this.permissions_obj.id_all = true;
    } else {
      this.permissions_obj.id_all = false;
    }
  },
  mounted() {
    this.getFileUploadParth();
    this.getChannelList();
    this.getDataList();
  },
  methods: {
    //显示用户详情
    handleEdit(index, row) {
      this.fileList=[];
      this.bgImgFileList=[];
      this.centerDialogVisible = true;
      this.isShowQrcode=true;
      this.selectId = row.id;
      this.getUserDetail(this.selectId);
    },
    //显示发送会员卡弹窗
    handleVip(index, row) {
      this.vipDialogVisible = true;
      this.selectId = row.id;
      this.getVipList();
    },
    //显示绑定老客户弹窗
    handleOldUser(index, row) {
      this.inputOldUser = "";
      this.oldUserDialogVisible = true;
      this.selectId = row.id;
    },
    //删除单行数据
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    //多选框选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //批量删除
    batchDelete() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          if (this.multipleSelection[i].num == this.tableData[j].num) {
            this.tableData.splice(j, 1);
            j--;
          }
        }
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.getDataList();
    },
    handleSizeChange(val){
      this.pageSize=val;
      this.getDataList();
    },
    //提交发送会员卡
    async submitSendVip() {
      if(!this.flag){
        return;
      }
      this.flag=false;
      let parames = {
        handshake: "",
        data: {
          id: this.selectId,
          card_id: this.sendVipSelect
        }
      };
      let res = await this.$axios.post(
        this.$api.userSend_card,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.flag=true;
        this.vipDialogVisible = false;
      } else {
        this.flag=true;
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //取消发送会员卡
    cancelSendVip() {
      this.vipDialogVisible = false;
    },
    //提交绑定老用户
    async submitOldUser() {
      if (!this.inputOldUser) {
        this.$message({
          message: "请输入手机号码",
          type: "warning"
        });
        return;
      }
      let parames = {
        handshake: "",
        data: {
          id: this.selectId,
          mobile: this.inputOldUser
        }
      };
      let res = await this.$axios.post(
        this.$api.userBind_phone,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.oldUserDialogVisible = false;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //取消绑定老用户
    cancelOldUser() {
      this.oldUserDialogVisible = false;
    },

    //获取初始化用户列表
    async getDataList() {
      let parames = {
        handshake: "",
        data: {
          page: this.currentPage1,
          page_size: this.pageSize,
          search: {
            nick: this.search1,
            id: this.search2,
            mobile: this.search3,
            code: this.search4,
            status: this.search5,
            device_type: this.search6,
            stime:
              this.search7 && this.search7.length > 0 ? this.search7[0] : "",
            otime:
              this.search7 && this.search7.length > 1 ? this.search7[1] : "",
            channel_id: this.search8 == "全部" ? "" : this.search8,
            parent_id: this.search9,
            star:this.search10,
          }
        }
      };
      let res = await this.$axios.post(
        this.$api.userList,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.initData = res.data;
        this.initData.data.forEach((item, index) => {
          if (item.device_type == "I") {
            item.device_text = "苹果";
          } else if (item.device_type == "A") {
            item.device_text = "安卓";
          } else if (item.device_type == "H") {
            item.device_text = "来源h5";
          }
          if (item.status == 0) {
            item.status_text = "禁用";
            item.status_booln = false;
          } else if (item.status == 1) {
            item.status_text = "正常";
            item.status_booln = true;
          } else if (item.status == 2) {
            item.status_text = "删除";
          }
        });
        this.totalSize = this.initData.total;
        this.tableData = this.initData.data;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //搜索
    searchMethod() {
      this.currentPage1 = 1;
      this.getDataList();
    },
    //获取用户详情
    async getUserDetail(id) {
      let parames = {
        handshake: "",
        data: {
          id: id
        }
      };
      let res = await this.$axios.post(
        this.$api.userDetail,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.userDetail = res.data;
        if (this.userDetail.device_type == "I") {
          this.userDetail.device_text = "苹果";
        } else if (this.userDetail.device_type == "A") {
          this.userDetail.device_text = "安卓";
        } else if (this.userDetail.device_type == "H") {
          this.userDetail.device_text = "来源h5";
        }
        if (this.userDetail.status == 0) {
          this.userDetail.status_text = "禁用";
        } else if (this.userDetail.status == 1) {
          this.userDetail.status_text = "正常";
        } else if (this.userDetail.status == 2) {
          this.userDetail.status_text = "删除";
        }
        this.inputUserName = this.userDetail.nick;
        this.inputIntroduction = this.userDetail.intro;
        this.qrcode(this.userDetail.qrcode);
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //改变账号状态
    async changeSwitch(index, row) {
      let id = row.id;
      let status = row.status;
      if (row.status == 1) {
        row.status = 0;
      } else {
        row.status = 1;
      }
      this.$confirm("是否继续该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let parames = {
            handshake: "",
            data: {
              status: status,
              id: id
            }
          };
          let res = await this.$axios.post(
            this.$api.userUpdate,
            JSON.stringify(parames)
          );
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success"
            });
            this.getDataList();
          } else {
            this.$message({
              message: res.message,
              type: "warning"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作"
          });
        });
    },
    //获取会员卡列表
    async getVipList() {
      let parames = {
        handshake: "",
        data: {
          page: 1,
          page_size: 999,
          search: {
            status: ""
          }
        }
      };
      let res = await this.$axios.post(
        this.$api.cardList,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.optionsVip = res.data.data;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //获取渠道号列表
    async getChannelList() {
      let parames = {
        handshake: "",
        data: {}
      };
      let res = await this.$axios.post(
        this.$api.channelCount,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        let channelData = res.data;
        this.optionsChannel = channelData.channel_list;
        this.optionsChannel.unshift("全部");
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    handleDiamond(index, row) {
      this.inputgoldNum = "";
      this.selectId = row.id;
      this.goldDialogVisible = true;
    },
    //提交发放钻石
    async submitSendGold() {
      if(!this.flag){
        return;
      }
      this.flag=false;
      let parames = {
        handshake: "",
        data: {
          id: this.selectId,
          coins: this.inputgoldNum
        }
      };
      let res = await this.$axios.post(
        this.$api.userSend_coins,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.goldDialogVisible = false;
        this.flag=true;
        this.getDataList();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
        this.flag=true;
      }
    },
    //取消发放钻石
    cancelSendGold() {
      this.goldDialogVisible = false;
    },
    //头像上传成功
    imgUploadSuccess(response, file, fileList) {
      this.$message({
        message: "上传成功",
        type: "success"
      });
      this.uploadImg = response.result.file_path;
    },
    imgUploadFailure(err, file, fileList) {
      this.$message({
        message: "上传失败",
        type: "warning"
      });
    },
    //个人主页背景上传成功
    bgImgUploadSuccess(response, file, fileList) {
      this.$message({
        message: "上传成功",
        type: "success"
      });
      this.uploadBgImg = response.result.file_path;
    },
    bgImgUploadFailure(err, file, fileList) {
      this.$message({
        message: "上传失败",
        type: "warning"
      });
    },
    //获取文件上传地址
    async getFileUploadParth() {
      let parames = {
        handshake: "",
        data: {}
      };
      let res = await this.$axios.post(
        this.$api.uploadGet_domain,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        let timestamp = parseInt(new Date().getTime() / 1000);
        let platform = "P";
        let secret = "Z6Kbz8hpT9VtGmcu";
        let sign = md5(platform + timestamp + secret).toUpperCase();
        // console.log(sign);
        this.imgUploadParth =
          res.data.url +
          "?dir=avatar&platform=P&timestamp=" +
          timestamp +
          "&sign=" +
          sign;
        this.bgImgUploadParth =
          res.data.url +
          "?dir=user_cover&platform=P&timestamp=" +
          timestamp +
          "&sign=" +
          sign;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    async submitModifyEditor() {
      let parames = {
        handshake: "",
        data: {
          id:this.selectId,
          nick:this.inputUserName,
          avatar:this.uploadImg,
          cover:this.uploadBgImg,
          intro:this.inputIntroduction
        }
      };
      let res = await this.$axios.post(
        this.$api.userUpdate,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
       this.$message({
          message: res.message,
          type: "success"
        });
        this.getDataList();
        this.centerDialogVisible = false;
      this.isShowQrcode=false;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    cancelModifyEditor() {
      this.centerDialogVisible = false;
      this.isShowQrcode=false;
    },
    //头像图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //个人主页背景预览
    handleBgPictureCardPreview(file) {
      this.bgDialogImageUrl = file.url;
      this.bgDialogVisible = true;
    },
    qrcode(link) {
      let that = this;
      let qrcode = new QRCode("qrcode", {
        width: 124,
        height: 124, // 高度
        text: link // 二维码内容
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
      });
    }
  }
};
</script>
<style scoped>
.userList {
  padding-bottom: 0.2rem;
}

h3 {
  padding: 0.2rem;
  color: #3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.detail .title {
  margin-bottom: 0.1rem;
  color: #05a4bf;
}
.detail .detailBox {
  display: flex;
  flex-wrap: wrap;
}
.detail .detailItem {
  width: 50%;
  margin-bottom: 0.1rem;
}
.history .title {
  margin: 0.1rem 0;
  color: #05a4bf;
}
.user_device .title {
  margin: 0.1rem 0;
  color: #05a4bf;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.goldRow {
  margin-bottom: 0.1rem;
}
.goldRow span {
  width: 0.9rem;
  display: inline-block;
}
.row {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
.row span {
  width: 1rem;
  display: block;
}
.row >>> .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.row >>> .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.row >>> .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.row >>> .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.userInfo {
  padding: 10px 0;
}
</style>